<template>
	<view>
		<view class="title">手机号登录</view>
		<form action="" class="formClass">
			<view class="inputView">
				<input type="text" placeholder="请输入手机号" name="phone" v-model="phone" class="dataInput">
			</view>
			<view class="inputView">
				<input type="text" placeholder="请输入验证码" name="code" v-model="code" class="dataInput codeInput">
				<button class="getCode" @click="getCode" :disabled='disabled'>{{codeInfo}}</button>
			</view>
			<view class="register" @click='goto("注册界面url;  goto自定义方法")'>
				立即注册
			</view>
			<button class="loginButton" @click="login">登录</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 二维码
				code: '',
				// 手机号
				phone: '',
				codeInfo: '获取验证码',
				// 获取验证码倒计时
				seconds: 60,
				// 获取验证码的窗口的状态
				disabled: false,
			}
		},
		onLoad(options) {
			// // 从缓存中获取数据
			// var loginInfo = uni.getStorageSync('loginInfo');
			// if (loginInfo) {
			// 	this.phone = loginInfo.phone
			// }
		},
		methods: {
			// 获取二维码
			getCode() {
				// 手机号判空校验
				if (!this.phone) {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					})
					return;
				}

				// 前端对手机号格式进行简单验证
				const phoneRegex = /^1[3-9]\d{9}$/; // 简单的手机号格式验证
				if (!phoneRegex.test(this.phone)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none'
					})
				}

				uni.request({
					/**
					 * 初步设计登录:
					 * 用户不输入手机号, 点击验证码会弹出手机号不能为空
					 * 用户输入手机号之后, 前端先进行校验, 检验手机号格式是否正确(数字,位数等等)
					 * 然后都满足向后端发起请求
					 * 
					 * 发起请求的过程如下:
					 * 拿着手机号作为key去Redis当中寻找, 查看是否存在, 存在则拿到二维码, 
					 * (至于二维码过期可以设置销毁时间, 如果超过60s,则会在Redis缓存当中销毁)
					 * 这样不必担心验证码过期, 但是会存在用户连续刷新, 不断发送验证码的问题
					 */
					url: '对接后端二维码生成',
					method: 'GET',
					data: {
						phone: this.phone
					},
					success: (res) => {
						// 请求处理成功
						uni.showToast({
							title: '验证码已发送',
							icon: 'success'
						});
					},
					fail: () => {
						uni.showToast({
							title: '请求失败,检查网络',
							icon: 'none'
						})
					}
				})
				// 设置倒计时
				const timer = setInterval(() => {
					// 获取验证码窗口状态设置为不可修改
					this.disabled = true;

					// 倒计时设置
					this.codeInfo = `${this.seconds}秒后重试`;
					this.seconds--;



					// 倒计时结束
					if (this.seconds <= 0) {
						/**
						 * 1. 清除定时器
						 * 2. 重新设置验证码窗口信息
						 * 3. 重新设置倒计时
						 * 4. 重新设置验证码窗口状态
						 */
						clearInterval(timer);
						this.codeInfo = '获取验证码';
						this.seconds = 60;
						this.disabled = false
					}
				}, 1000);
			},

			//获取用户信息
			getInfo() {
				if (getApp().globalData.authorization != null) {
					uni.request({
						url: 'http://localhost:8088/system/user/getInfo',
						header: {
							authorization: getApp().globalData.authorization
						},
						success: res => {
							getApp().globalData.loginfo = res.data.user;
							this.getShop();
						}
					});
					uni.reLaunch({
						url: '/pages/index/index',
					})
				}
			},

			//获取用户店铺信息->存入小程序缓存当中
			getShop() {
				if (getApp().globalData.authorization != null) {
					var loginfo = getApp().globalData.loginfo;
					uni.request({
						url: '对接获取商户列表',
						header: {
							authorization: getApp().globalData.authorization
						},
						data: {
							mobile: loginfo.userName
						},
						success: res => {
							getApp().globalData.userShop = res.data.rows[0];
						}
					});
				}
			},

			login() {
				uni.request({
					// url: `http://localhost:8088/business/business/login/${this.phone}/${this.code}`,
					url: '登录接口',
					method: "POST",
					success: (resp) => {
						if (resp.data.code == 200) {
							// 登录成功，把登录的用户信息存储到globalData中
							uni.setStorageSync('loginInfo', {
								phone: this.phone
							})
							getApp().globalData.authorization = 'Bearer ' + resp.data.data.access_token;
							this.getInfo();
						} else {
							/**
							 * 后端可以反馈具体错误信息
							 * 以下是三种情况
							 * 1. 验证码错误
							 * 2. 验证码过期
							 * 3. 用户不存在
							 * 
							 */
							uni.showToast({
								title: '账号或验证码错误!',
								icon: 'none'
							})
						}
					}
				})
			},
			goto(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style>
	.title {
		font-size: 48rpx;
		line-height: 50rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		font-weight: 400;
		margin-bottom: 60rpx;
	}


	.inputView {
		margin: 50rpx 40rpx 0 40rpx;
		display: flex;
		border-bottom: 2rpx solid #BBBBBB;
		position: relative;
	}

	.left {
		padding-top: 30rpx;
		font-size: 24rpx;
	}

	.dataInput {
		height: 98rpx;
		width: 548rpx;
		font-size: 28rpx;
		color: #A2A2A2;
		margin-left: 50rpx;
	}

	.getCode {
		width: 186rpx;
		height: 62rpx;
		background-color: #E6E6E6;
		color: #1D6FFF;
		font-size: 24rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 62rpx;
		padding: auto;
		position: absolute;
		right: 50rpx;
		bottom: 20rpx;
	}

	.register {
		margin-top: 35rpx;
		margin-bottom: 90rpx;
		margin-left: 45rpx;
		color: #1D6FFF;
	}

	.loginButton {
		width: 600rpx;
		height: 82rpx;
		background-color: #1D6FFF;
		margin: 110rpx 30rpx 0 75rpx;
		font-size: 32rpx;
		line-height: 82rpx;
		color: #FFFFFF;
	}
</style>